<template>
	<div class="demo-time-range">
		<div>
			<el-time-select v-model="startTime" style="width: 240px" :max-time="endTime" class="mr-4"
				:placeholder="startPlaceholder" :start="startTimestart" :step="startTimeStep"
				v-bind="$attrs.startOptions" :end="startTimeend" />
		</div>
		<div>
			<el-time-select v-model="endTime" style="width: 240px" :min-time="startTime" :placeholder="endPlaceholder"
				:start="endTimestart" :disabled="endTimeDisabled" v-bind="$attrs.endOptions" :step="endTimeStep"
				:end="endTimeend" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	let props = defineProps({
		startPlaceholder: {
			type: String,
			default: '请选择开始时间'
		},
		endPlaceholder: {
			type: String,
			default: '请选择结束时间'
		},
		startTimestart: {
			type: String,
			default: '08:00'
		},
		startTimeStep: {
			type: String,
			default: "00:30"
		},
		startTimeend: {
			type: String,
			default: '23:00'
		},
		endTimestart: {
			type: String,
			default: '08:00'
		},
		endTimeStep: {
			type: String,
			default: "00:30"
		},
		endTimeend: {
			type: String,
			default: '23:00'
		}
	})
	const startTime = ref<string>('')
	const endTime = ref<string>('')
	const endTimeDisabled = ref<boolean>(true)
	let emits = defineEmits(['startChange', 'endChange'])
	watch(() => startTime.value, val => {
		// console.log(startTime.value,val)
		if (val === '' || val === undefined) {
			endTime.value = '';
			endTimeDisabled.value = true;
		} else {
			endTimeDisabled.value = false;
			emits('startChange', val)
		}
	})
	watch(() => endTime.value, val => {
		if (val === '' || val === undefined) {
		} else {
			emits('endChange', {
				startTime: startTime.value,
				endTime: val
			})
		}

	})
</script>

<style>
</style>